<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="https://cdn.staticfile.org/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" onclick="uploadFile()" class="btn btn-default">开始上传</button>
        <div id="progress"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    var webUploaderParam;
        $.ajax({
            type: "GET",
            dataType: "json",
            async: false,
            url: 'http://localhost:8080/webUploaderParam.json',
            success: function (data) {
                webUploaderParam = data
                console.log(data);
            }
        });
        var chunkSize = 1;
        let splitArray = webUploaderParam.chunkSize.split("*");
            for (var i = 0 ; i < splitArray.length ; i++) {
                chunkSize *= splitArray[i]
            }

    var GUID = WebUploader.Base.guid();//一个GUID
   /* 分片大小，剩余分片大小<<分片大小可能会造成数组[0，127]状态导致触发断点续传，其实只是写入慢而，
     解决方法：1.细粒度分片（对于1.多M的文件没用，不支持分片大小1M以下，本来就不是为小文件服务的）
             2.提高写入速度
             注：千万不能为了[12,127]填满前面使用同步，违背了分片的初衷*/
    var $thelist = $('#thelist');

    var uploader = WebUploader.create({
        // // 指定选择文件的按钮容器，不指定则不创建按钮。
        pick: {
            id: '#picker', // 指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点
            label: '选择文件1', // 请采用 innerHTML 代替
            multiple: true   // 是否开起同时选择多个文件能力
        },
        auto: webUploaderParam.auto, // 设置为 true 后，不需要手动调用上传，有文件选择即开始上传
        prepareNextFile: true, //否允许在文件传输时提前把下一个文件准备好。 某些文件的准备工作比较耗时，比如图片压缩，md5序列化。 如果能提前在当前文件传输期处理，可以节省总体耗时。
        chunked: true, // 是否要分片处理大文件上传
        chunkSize: chunkSize,  // 如果要分片，分多大一片？ 默认大小为5M；分片大小大于文件大小则不予以分片，formData就没有自动传chunk和chunks造成后台空指针
        /*chunks: 4,*/ //能分片会自动传这个值，不用在formData定义
        chunkRetry: webUploaderParam.chunkRetry, //如果某个分片由于网络问题出错，允许自动重传多少次
        chunkRetryDelay: webUploaderParam.chunkRetry, // 开启重试后，设置重试延时时间, 单位毫秒
        threads: webUploaderParam.threads, // 上传并发数。允许同时最大上传进程数
        formData: {
            uid: 0,
            md5: '',
            chunkSize: chunkSize,//这个不传后端算法会导致双倍写入
            guid: GUID,
            path: webUploaderParam.path
        },
        server: webUploaderParam.server,
        swf: 'http://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',
        fileNumLimit: 1000, //验证文件总数量, 超出则不允许加入队列
        fileSizeLimit: 1024 * 1024 * 1024 * 1024, // 10G,验证文件总大小是否超出限制, 超出则不允许加入队列
        fileSingleSizeLimit: 1024 * 1024 * 1024 * 10,// 验证单个文件大小是否超出限制, 超出则不允许加入队列
        duplicate: false, //去重， 根据文件名字、文件大小和最后修改时间来生成hash Key
    });

    function uploadFile() {
            uploader.upload();
    }

    // // 当文件添加进队列以后触发
    uploader.on('filesQueued', function (files) {
        console.log("filesQueued");
        console.log(files);
        for (var i = 0; i < files.length; i++) {
            $thelist.append('<div id="' + files[i].id + '" class="item">' +
                '<h4 class="info">' + files[i].name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
        }
    });
    //当文件上传成功时触发。
    uploader.on("uploadSuccess", function (file) {
       /* $.post('http://172.18.71.64:18000/upload/merge', { guid: GUID, fileName: file.name }, function (data) {
            if (data.code == 200) {
                alert('上传成功!');
            }
        });*/
        alert('上传成功!');
    });
    // 上传过程中触发，携带上传进度
    uploader.on('uploadProgress', function (file, percentage) {
        console.log('uploadProgress')
        percentage = percentage.toFixed(2);
        getProgressBar(file, percentage, "FILE", "上传进度");
    });



    /**
     *  生成进度条封装方法
     * @param file 文件
     * @param percentage 进度值
     * @param id_Prefix id前缀
     * @param titleName 标题名
     */
    function getProgressBar(file, percentage, id_Prefix, titleName) {
        var $li = $('#' + file.id), $percent = $li.find('#' + id_Prefix + '-progress-bar');
        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div id="' + id_Prefix + '-progress" class="progress progress-striped active">' +
                '<div id="' + id_Prefix + '-progress-bar" class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>'
            ).appendTo($li).find('#' + id_Prefix + '-progress-bar');
        }
        var progressPercentage = percentage * 100 + '%';
        $percent.css('width', progressPercentage);
        $percent.html(titleName + ':' + progressPercentage);
    }
</script>
</html>